import { createContext } from 'react'

// Context 对象包含两个组件
// Context.Provider：通过 value 属性提供数据
// Context.Consumer: 通过 render-props 模式，在 JSX 中获取 Context 中提供的数据
const Context = createContext('亚瑟')

function App() {
  // const [color, setColor] = useState('狮心王亚瑟')
  return (
    <div>
      <h4>Context 跨组件传值</h4>
      <hr />
      {/* 如果提供了 Provider 组件，Consumer 获取到的是 Provider 中 value 属性的值 */}
      {/* <Context.Provider value={color}> */}
      {/* <Son></Son> */}
      {/* </Context.Provider> */}

      {/* 如果没有提供 Provider 组件，Consumer 获取到的是 createContext(defaultValue) 的 defaultValue 值*/}
      <Son></Son>
    </div>
  )
}

function Son() {
  return (
    <div>
      <h4>子组件</h4>
      <hr />
      <Sub></Sub>
    </div>
  )
}

function Sub() {
  return (
    <div>
      <Context.Consumer>
        {(value) => (
          <div>
            <h4>孙组件</h4>
            <p>{value}</p>
          </div>
        )}
      </Context.Consumer>
    </div>
  )
}

export default App
